<template>
  <div>
    <el-row :gutter="5" type="flex" style="flex-wrap:wrap">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="120px" label-identity="right" :disabled="setting.readonly" v-loading="loading">
        <el-col :span="24">
          <el-form-item label-width="0">
            <groupTitle content-position="left" content="定金客户"></groupTitle>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校区品牌" prop="brand">
            <el-select v-model="dataForm.brand" placeholder="请选择校区品牌" filterable clearable required :style="{ width: '100%' }">
              <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="customerId">
            <el-autocomplete v-model="dataForm.customerName" :fetch-suggestions="querySearchSchoolAsync" placeholder="请选择客户" :style="{ width: '100%' }" @select="handleSelectCustomer">
              <template slot-scope="{ item }">
                <div class="name">{{ item.name }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="意向学校" prop="primarySchool">
            <el-input v-model="dataForm.primarySchool" placeholder="请输入意向小学/中学" clearable required :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费金额" prop="amount">
            <el-input v-model="dataForm.amount" placeholder="请输入" clearable required :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费时间" prop="paymentDate">
            <el-date-picker v-model="dataForm.paymentDate" placeholder="请选择" clearable required :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="尾款时间" prop="finalPaymentDate">
            <el-date-picker v-model="dataForm.finalPaymentDate" placeholder="请选择" clearable required :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="招商经理" prop="manageId">
            <el-select v-model="dataForm.manageId" filterable>
              <el-option :key="item.id" :label="item.realName" :value="item.id" v-for="item in userList" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="缴费类型" prop="type">
            <el-radio-group v-model="dataForm.type" required :style="{}">
              <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.id">{{ item.fullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="dataForm.remarks" placeholder="请输入" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="付款截图" prop="screenshot">
            <custom-upload-img :type="'screenshot'" v-model="dataForm.screenshot" :fileSize="500" sizeUnit="MB" :limit="9"></custom-upload-img>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export { default } from './index.js'
</script>
